<template>
  <view class="tijian">
    <view class="filter">
      <view
        class="filter-box"
        @click="other(index)"
        v-for="(item, index) in queryVal"
        :key="item._id"
      >
        <text v-if="item.query_val == '全部'">{{
          name == "" ? item.query_val : name
        }}</text>
        <text v-else>{{ item.query_val }}</text>
      </view>
    </view>
    <view class="show-box">
      <view
        class="show"
        v-show="show"
        @click="close(item)"
        v-for="(item, index) in queryVal[0]?.filter_val"
        :key="index"
      >
        <text>{{ item }}</text>
      </view>
    </view>
    <view class="taocan">
      <view
        class="taocan-box"
        @click="goDetail(item)"
        v-for="(item, index) in List"
        :key="index"
      >
        <text>{{ item.title }}</text>
        <view class="box">
          <view class="pic">
            <image mode="widthFix" :src="item.image"></image>
          </view>
          <view class="txt">
            <p class="p1">{{ item.be_suit }}</p>
            <p class="p2">{{ item.describe }}</p>
          </view>
        </view>
        <view class="box-t">
          <p class="p3">已约{{ item.sales }}</p>
          <p class="p4">￥{{ item.price }}</p>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { queryValT, tabocanT } from "../../types/type";
onMounted(() => {
  getList();
  getList1();
});
const queryVal = ref<queryValT[]>([]);
const getList = async () => {
  const res: any = await api.phyterm();
  queryVal.value = res.data;
};
const List = ref<tabocanT[]>([]);
const getList1 = async () => {
  const res: any = await api.physget();
  console.log(res);
  List.value = res.data;
};
const getList2 = async () => {
  const res: any = await api.phyquery({
    type: name.value,
    sales: sales.value,
    price: price.value,
  });
  console.log(res);
  List.value = res.data;
};
const show = ref(false);
const flag = ref(0);
const other = (index: number) => {
  switch (index) {
    case 0:
      if (flag.value == 0) {
        show.value = true;
        flag.value = 1;
      } else if (flag.value == 1) {
        show.value = false;
        flag.value = 0;
      }
      break;
    case 1:
      if (flag.value == 0) {
        sales.value = "asc";
        flag.value = 1;
        getList2();
      } else if (flag.value == 1) {
        sales.value = "desc";
        flag.value = 0;
        getList2();
      }

      break;
    case 2:
      if (flag.value == 0) {
        price.value = "asc";
        flag.value = 1;
        getList2();
      } else if (flag.value == 1) {
        price.value = "desc";
        flag.value = 0;
        getList2();
      }
  }
};

const name = ref<string>("");
const sales = ref<string>("");
const price = ref<string>("");
const close = (item: string) => {
  show.value = false;
  flag.value = 0;
  name.value = item;
  getList2();
};
const goDetail = (item: tabocanT) => {
  uni.setStorageSync("tijiandetail", item._id);
  uni.navigateTo({
    url: "/navPage/tijiandetail/tijiandetail",
  });
};
</script>

<style lang="scss" scoped>
.tijian {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
  .filter {
    display: flex;
    align-items: center;
    .filter-box {
      width: 33%;
      background-color: #fff;
      line-height: 100rpx;
      text-align: center;
    }
    .filter-box:nth-child(1) {
      background-image: url("../../static/other/shaixuan-jiantou.png");
      background-size: 30rpx 30rpx;
      background-repeat: no-repeat;
      background-position: 180rpx center;
    }
    .filter-box:nth-child(2),
    .filter-box:nth-child(3) {
      background-image: url("../../static/other/shaixuan.png");
      background-size: 30rpx 30rpx;
      background-repeat: no-repeat;
      background-position: 180rpx center;
    }
  }
  .show-box {
    position: fixed;
    top: 100rpx;
    left: 0;
    width: 100%;
  }
  .show {
    width: 100%;
    background-color: #fff;
    line-height: 80rpx;
    height: 80rpx;
    padding: 0 50rpx;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
  }
  .taocan {
    .taocan-box {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      margin: 20rpx 0;
      text {
        font-weight: 600;
      }
      .box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .pic {
          image {
            width: 250rpx;
          }
        }
        .txt {
          margin-left: 20rpx;
          .p1 {
            font-weight: 600;
          }
          .p2 {
            color: #ccc;
          }
        }
      }
      .box-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        color: #f00;
        font-weight: 600;
      }
    }
  }
}
</style>
